<template>
  <!-- 运营系统-短剧列表 -->
  <d2-container class="d-flex flex-column">
    <template >
      <div class="d-flex" slot="header">

        <el-form
          class="d-flex b-s my-10"
		  size="small"
        >
          <el-form-item class="d-flex mr_20" label="用户名称">
            <el-input
              v-model="inputva"
              placeholder="用户名称"
              clearable
            />
          </el-form-item>

          <el-form-item class="mr_20">
            <el-button
              icon="el-icon-search"
              type="primary"
              @click="getTableList2()"
              >查询</el-button
            >
          </el-form-item>
          <!-- <el-form-item>
            <el-button
              type="success"
              icon="el-icon-circle-plus-outline"
             
     
              >添加标签</el-button
            >
          </el-form-item> -->
        </el-form>
      </div>


      <div class="d-flex h-100 b-s flex-column">
        <div class="d-flex flex-1">
          <div class="overflow" v-if="orderList">


            <vxe-grid
              keep-source
              border
              resizable
              highlight-hover-row
              size="small"
              ref="pGrid"
              
              
              :columns="columns"
              height="100%"
              :data="orderList"
          
              :row-config="{ useKey: true }"
              :column-config="{ useKey: true }"
              :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
            >


            </vxe-grid>
          </div>
        </div>
      </div>

      

      <div class="d-flex" slot="footer">
				<vxe-pager background size="medium" align="right" :border="false" 
          :current-page="current_page"
					:page-size="per_page" 
          :total="total"
					:layouts="['PrevPage', 'Number', 'NextPage', 'Sizes', 'FullJump', 'Total']"
					@page-change="handlePageChange($event)">
				</vxe-pager>
			</div>
    
      
    
      <!-- 标签编辑 -->
			<el-dialog title="修改状态" :visible.sync="showDialog">
				<el-form :model="diyform">
			
          <el-form-item  label="选择状态" :label-width="formLabelWidth">
					

            <el-select v-model="curentstate" placeholder="请选择">
              <el-option
              v-for="item in statearr"
              :key="item.id"
              :label="item.name"
              :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>	

				
				</el-form>
				<div slot="footer" class="dialog-footer">
				<el-button @click="showselecttag('f')">取 消</el-button>
				<el-button type="primary" @click="showselecttag('t')">确 定</el-button>
				</div>
			</el-dialog>
    
    </template>
   
  </d2-container>
</template>

<script>
let that;

export default {

  components: {
  },
  data() {
    return {
      formLabelWidth: '120px',
      curentstate:0,
      curent_id:0,
      showDialog:false,
      inputva:'',
      current_page:1,
      last_page :1,
      per_page:1,
      orderList:[],
      orderList2:[
        {
            "id": 26,
            "data_user_id": 1,
            "status": 2,
            "phone": "13100001111",
            "created_at": "2023-11-09 11:36:36",
            "updated_at": "2023-11-09 20:06:44",
            "data_user_name": "bobo",
            "status_name": "已处理",
            "playlet_name": "遇见特别的你,闪婚老公是首富"
        },
        {
            "id": 26,
            "data_user_id": 1,
            "status": 2,
            "phone": "13100001111",
            "created_at": "2023-11-09 11:36:36",
            "updated_at": "2023-11-09 20:06:44",
            "data_user_name": "bobo",
            "status_name": "已处理",
            "playlet_name": "遇见特别的你,闪婚老公是首富"
        },
        {
            "id": 26,
            "data_user_id": 1,
            "status": 2,
            "phone": "13100001111",
            "created_at": "2023-11-09 11:36:36",
            "updated_at": "2023-11-09 20:06:44",
            "data_user_name": "bobo",
            "status_name": "已处理",
            "playlet_name": "遇见特别的你,闪婚老公是首富"
        },
        {
            "id": 26,
            "data_user_id": 1,
            "status": 2,
            "phone": "13100001111",
            "created_at": "2023-11-09 11:36:36",
            "updated_at": "2023-11-09 20:06:44",
            "data_user_name": "bobo",
            "status_name": "已处理",
            "playlet_name": "遇见特别的你,闪婚老公是首富"
        },
        {
            "id": 26,
            "data_user_id": 1,
            "status": 2,
            "phone": "13100001111",
            "created_at": "2023-11-09 11:36:36",
            "updated_at": "2023-11-09 20:06:44",
            "data_user_name": "bobo",
            "status_name": "已处理",
            "playlet_name": "遇见特别的你,闪婚老公是首富"
        },
        {
            "id": 26,
            "data_user_id": 1,
            "status": 2,
            "phone": "13100001111",
            "created_at": "2023-11-09 11:36:36",
            "updated_at": "2023-11-09 20:06:44",
            "data_user_name": "bobo",
            "status_name": "已处理",
            "playlet_name": "遇见特别的你,闪婚老公是首富"
        },
        {
            "id": 26,
            "data_user_id": 1,
            "status": 2,
            "phone": "13100001111",
            "created_at": "2023-11-09 11:36:36",
            "updated_at": "2023-11-09 20:06:44",
            "data_user_name": "bobo",
            "status_name": "已处理",
            "playlet_name": "遇见特别的你,闪婚老公是首富"
        },
        {
            "id": 26,
            "data_user_id": 1,
            "status": 2,
            "phone": "13100001111",
            "created_at": "2023-11-09 11:36:36",
            "updated_at": "2023-11-09 20:06:44",
            "data_user_name": "bobo",
            "status_name": "已处理",
            "playlet_name": "遇见特别的你,闪婚老公是首富"
        }
      ],
      tableLoading: false,
      curent: 0,
      total: 0,
      dataList: [],
      statearr:[
        {id:1,name:'待处理'},
        {id:2,name:'已处理'},
        {id:3,name:'处理失败'},
      ],
      diyform: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
					},
    
      columns: [
        {
          title: "创建时间",
          field: "created_at",
          width: 180,
          sortable: true,
          align: "center",
        },
        {
          title: "ID",
          field: "id",
          width: 100,
          sortable: true,
          align: "center",
        },
        {
          title: "名称",
          field: "data_user_name",
          width: 200,
          sortable: false,
          align: "center",
        },
        {
          title: "手机",
          field: "phone",
          width: 200,
          sortable: false,
          align: "center",
        },
        {
          title: "剧名",
          field: "playlet_name",
          width: 200,
          sortable: false,
          align: "center",
        },
        {
          title: "状态",
          field: "status_name",
          width: 200,
          sortable: false,
          align: "center",
        },

       

       
        {
          title: "更新时间",
          field: "updated_at",
          width: 180,
          sortable: true,
          align: "center",
        },
        {
          title: "操作",
          field: "other",
          width: 120,
          fixed: "right",
          sortable: false,
          align: "center",
          slots: {
            default: ({ row }) => {
              return [
                <el-button
                  size="mini"
                  round
                  icon="el-icon-edit"
                  v-show={true}
                  onClick={() => this.addOrUpdateData2(row)}
                  type="primary"
                >
                  {" "}
                  修改{" "}
                </el-button>,
                // <el-button
                //   size="mini"
                //   round
                //   icon="el-icon-delete"
                //   v-show={this.$hasPermission("playlet:playlet:delete")}
                //   type="danger"
                //   onClick={() => this.deleteHandleSetter(row)}
                // >
                //   {" "}
                //   删除{" "}
                // </el-button>,
              ];
            },
          },
        },
      ],
    };
  },
  created() {
 
  },
  mounted() {

    this.getTableList2()
  },
  computed: {
  },
  methods: {
    async getTableList2() {
      this.tableLoading = true;
      let current_page = this.current_page
      let inputva = this.inputva
	  if(inputva!=''){
	  	current_page = 1
	  }
      const tableRes = await this.$axios.get("/api/playlet/dataOrder?"+this.$qs.stringify({"keyword":inputva,"page":current_page}));
      console.log(262,tableRes)
      this.current_page = tableRes.current_page
      this.last_page = tableRes.last_page
      this.per_page = tableRes.per_page
      this.total = tableRes.total

      
      this.orderList = tableRes.data
    },
 
    addOrUpdateData2(e){
      this.showDialog = !this.showDialog
      this.curentstate = e.status
      this.curent_id = e.id
      console.log(299,e)
    },
    async showselecttag(str){
      console.log(261,str)
      if(str=='t'){
        let curentstate = this.curentstate
        let id = this.curent_id
        console.log(279,curentstate,id)
        const res = await this.$axios.post(
						`/api/playlet/dataOrder/update/${id}`,
						{"status": curentstate}
				)
        this.$message({
						message: '修改成功',
						type: 'success',
						duration: 1200
				})
        this.getTableList2()
        console.log(287,res)
      }else{

      }
      this.showDialog = !this.showDialog
    },
    handlePageChange(e){
      this.current_page = e.currentPage
      this.getTableList2()
      console.log(e.currentPage)
    },
    checkinput(e){
      console.log(396,e)
    }
    //新增/修改弹窗
    // async addOrUpdateData(row) {
    //   console.log(row);
    //   this.addOrUpdateVisible = true;
    //   if (typeof row == "object" && row != null) {
    //     // this.curName = row.real_name;
    //     const id = row.id;
    //     const userRes = await this.$axios.get(
    //       `/api/playlet/tag/update/${id}`,
    //       {}
    //     );
    //     this.$nextTick(() => {
    //       this.$refs.addOrUpdateDialog.bannerId = id;
    //       this.$refs.addOrUpdateDialog.innerTitle = row.name;
    //       this.$refs.addOrUpdateDialog.update(userRes);
    //     });
    //   } else {
    //     this.$nextTick(() => {
    //       this.$refs.addOrUpdateDialog.bannerId = null;
    //       this.$refs.addOrUpdateDialog.init();
    //     });
    //   }
    // },
 
  },
};
</script>

<style lang="scss" scoped>
:deep(.vxe-cell .el-button) {
  margin-bottom: 10px;
}
.item {
  .close {
    width: 26px;
    height: 26px;
    border: 2px solid #f76f21;
    border-radius: 26px;
    .close-icon {
      font-size: 20px;
      color: #f76f21;
    }
  }
  .item-title {
    font-size: 22px;
    font-weight: bold;
  }

  .item-simulate {
    border: 6px solid #a3a2a2;
    border-radius: 10px;
    width: 375px;
    min-height: 700px;
    max-height: 1200px;
    margin: 0 auto 10px;
    padding: 10px 5px;

    .list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start;

      .box {
        width: 165px;
        height: 93px;
        background: #f9f8f8;
        border: 2px solid #f5f5f5;
        border-radius: 8px;
        display: flex;
        position: relative;
        flex-direction: column;
        justify-content: flex-end !important;
        padding: 0 !important;
        box-sizing: content-box;
        margin: 10px 0;
        align-items: center;
        .pointer {
          width: 50%;
          height: auto;
          position: absolute;
          bottom: 0;
          right: 0;
        }
        .price {
          font-size: 15px;
          font-weight: 600;
          line-height: 35px;
          margin: 0;
          em {
            font-size: 35px;
            font-style: normal;
          }
        }
        .get {
          width: 100%;
          height: 28px;
          line-height: 28px;
          text-align: center;
          background: linear-gradient(180deg, #fff19d, #ff9e00);
          border-radius: 0 0 5px 5px;
          font-size: 14px;
          color: #583600;
          letter-spacing: 1px;
          font-weight: 500;
          margin: 0;
        }
      }
      .box-normal {
        .price {
          color: #f76f21;
        }
        .get {
          background: #fff7e3;
          color: #bf891c;
        }
      }
      .box-active {
        border: 2px solid #f97d36;
      }
    }
  }
}
.mr_20{
  margin-right: 20px;
}
</style>